---
import path from "node:path";
import Comment from "@components/comment/index.astro";
import License from "@components/misc/License.astro";
import Markdown from "@components/misc/Markdown.astro";
import I18nKey from "@i18n/i18nKey";
import { i18n } from "@i18n/translation";
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { getSortedPosts } from "@utils/content-utils";
import { getDir, getPostUrlBySlug } from "@utils/url-utils";
import { Icon } from "astro-icon/components";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { licenseConfig } from "@/config/licenseConfig";
import ImageWrapper from "@/components/misc/ImageWrapper.astro";
import PostMetadata from "@/components/content/PostMeta.astro";
import { profileConfig } from "@/config/profileConfig";
import { siteConfig } from "@/config/siteConfig";
import { formatDateToYYYYMMDD } from "@/utils/date-utils";
import { sponsorConfig } from "@/config/sponsorConfig";
import { url } from "@/utils/url-utils";
export async function getStaticPaths() {
  const blogEntries = await getSortedPosts();
  return blogEntries.map((entry) => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

const { entry } = Astro.props;
const { Content, headings } = await entry.render();

const { remarkPluginFrontmatter } = await entry.render();

// ...existing code...

dayjs.extend(utc);
const lastModified = dayjs(entry.data.updated || entry.data.published)
  .utc()
  .format("YYYY-MM-DDTHH:mm:ss");

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  headline: entry.data.title,
  description: entry.data.description || entry.data.title,
  keywords: entry.data.tags,
  author: {
    "@type": "Person",
    name: profileConfig.name,
    url: Astro.site,
  },
  datePublished: formatDateToYYYYMMDD(entry.data.published),
  inLanguage: entry.data.lang
    ? entry.data.lang.replace("_", "-")
    : siteConfig.lang.replace("_", "-"),
  // TODO include cover image here
};
---

<MainGridLayout
  banner={entry.data.image}
  title={entry.data.title}
  description={entry.data.description}
  lang={entry.data.lang}
  setOGTypeArticle={true}
  postSlug={entry.slug}
  headings={headings}
>
  <script
    is:inline
    slot="head"
    type="application/ld+json"
    set:html={JSON.stringify(jsonLd)}
  />
  <div
    class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4"
  >
    <div
      id="post-container"
      class:list={[
        "card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
        {},
      ]}
    >
      <!-- word count and reading time -->
      <div
        class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation"
      >
        <div class="flex flex-row items-center">
          <div
            class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2"
          >
            <Icon name="material-symbols:notes-rounded" />
          </div>
          <div class="text-sm">
            {remarkPluginFrontmatter.words}
            {" " + i18n(I18nKey.wordsCount)}
          </div>
        </div>
        <div class="flex flex-row items-center">
          <div
            class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2"
          >
            <Icon name="material-symbols:schedule-outline-rounded" />
          </div>
          <div class="text-sm">
            {remarkPluginFrontmatter.minutes}
            {
              " " +
                i18n(
                  remarkPluginFrontmatter.minutes === 1
                    ? I18nKey.minuteCount
                    : I18nKey.minutesCount
                )
            }
          </div>
        </div>
      </div>

      <!-- title -->
      <div class="relative onload-animation">
        <h1
          data-pagefind-body
          data-pagefind-weight="10"
          data-pagefind-meta="title"
          class="transition w-full block font-bold mb-3
                    text-3xl md:text-[2.25rem]/[2.75rem]
                    text-black/90 dark:text-white/90
                    md:before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
                    before:absolute before:top-[0.75rem] before:left-[-1.125rem]"
        >
          {entry.data.title}
        </h1>
      </div>

      <!-- metadata -->
      <div class="onload-animation">
        <PostMetadata
          class="mb-5"
          published={entry.data.published}
          updated={entry.data.updated}
          tags={entry.data.tags}
          category={entry.data.category}
          slug={entry.slug}
        />
        {
          !entry.data.image && (
            <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mt-3 mb-5" />
          )
        }
      </div>

      <!-- always show cover as long as it has one -->

      {
        entry.data.image && (
          <div style="margin-top:1rem;">
            <ImageWrapper
              id="post-cover"
              src={entry.data.image}
              basePath={path.join("content/posts/", getDir(entry.id))}
              class="mb-8 rounded-xl banner-container onload-animation"
            />
          </div>
        )
      }

      <Markdown class="mb-6 markdown-content onload-animation">
        <Content />
      </Markdown>

      {/* 赞助按钮 */}
      {
        sponsorConfig.showButtonInPost && siteConfig.pages.sponsor && (
          <div class="mb-6 rounded-xl onload-animation">
            <div class="p-6 bg-[var(--license-block-bg)] rounded-xl">
              <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="flex items-center gap-3 flex-1">
                  <div class="h-12 w-12 rounded-lg bg-[var(--primary)] flex items-center justify-center text-white dark:text-black/70 flex-shrink-0">
                    <Icon name="material-symbols:favorite" class="text-2xl" />
                  </div>
                  <div>
                    <h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-1">
                      {i18n(I18nKey.sponsorButton)}
                    </h3>
                    <p class="text-sm text-neutral-600 dark:text-neutral-400">
                      {i18n(I18nKey.sponsorButtonText)}
                    </p>
                  </div>
                </div>
                <a
                  href={url("/sponsor/")}
                  class="inline-flex items-center gap-2 px-6 py-3 bg-[var(--primary)] text-white dark:text-black/70 rounded-lg font-medium hover:bg-[var(--primary)]/80 hover:scale-105 active:scale-95 transition-all whitespace-nowrap"
                >
                  <span>{i18n(I18nKey.sponsor)}</span>
                  <Icon name="fa6-solid:arrow-right" class="text-sm" />
                </a>
              </div>
            </div>
          </div>
        )
      }

      {
        licenseConfig.enable && (
          <License
            title={entry.data.title}
            slug={entry.slug}
            pubDate={entry.data.published}
            author={entry.data.author}
            sourceLink={entry.data.sourceLink}
            licenseName={entry.data.licenseName}
            licenseUrl={entry.data.licenseUrl}
            class="mb-6 rounded-xl license-container onload-animation"
          />
        )
      }
    </div>
  </div>

  <!-- 上次编辑时间 -->
  {
    siteConfig.showLastModified && (
      <div class="card-base p-6 mb-4">
        <div class="flex items-center gap-2">
          <div class="transition h-9 w-9 rounded-lg overflow-hidden relative flex items-center justify-center mr-0">
            <Icon
              name="material-symbols:history-rounded"
              class="text-4xl text-[var(--primary)] transition-transform group-hover:translate-x-0.5 bg-[var(--enter-btn-bg)] p-2 rounded-md"
            />
          </div>

          {(() => {
            const lastModified = dayjs(
              entry.data.updated || entry.data.published
            );
            const now = dayjs();
            const daysDiff = now.diff(lastModified, "day");
            const dateStr = lastModified.format("YYYY-MM-DD");
            const isOutdated = daysDiff >= 1;

            return (
              <div class="flex flex-col gap-0.1">
                <div class="text-[1.0rem] leading-tight text-black/75 dark:text-white/75">
                  {`${i18n(I18nKey.lastModifiedPrefix)}${dateStr}${
                    isOutdated
                      ? `，${i18n(I18nKey.lastModifiedDaysAgo).replace("{days}", daysDiff.toString())}`
                      : ""
                  }`}
                </div>
                {isOutdated && (
                  <p class="text-[0.8rem] leading-tight text-black/75 dark:text-white/75">
                    {i18n(I18nKey.lastModifiedOutdated)}
                  </p>
                )}
              </div>
            );
          })()}
        </div>
      </div>
    )
  }

  <!-- 评论 -->
  <Comment post={entry} />

  <div
    class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full"
  >
    <a
      href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
      class:list={[
        "w-full font-bold overflow-hidden active:scale-95",
        { "pointer-events-none": !entry.data.nextSlug },
      ]}
    >
      {
        entry.data.nextSlug && (
          <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-start gap-4">
            <Icon
              name="material-symbols:chevron-left-rounded"
              class="text-[2rem] text-[var(--primary)]"
            />
            <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
              {entry.data.nextTitle}
            </div>
          </div>
        )
      }
    </a>

    <a
      href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
      class:list={[
        "w-full font-bold overflow-hidden active:scale-95",
        { "pointer-events-none": !entry.data.prevSlug },
      ]}
    >
      {
        entry.data.prevSlug && (
          <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-end gap-4">
            <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
              {entry.data.prevTitle}
            </div>
            <Icon
              name="material-symbols:chevron-right-rounded"
              class="text-[2rem] text-[var(--primary)]"
            />
          </div>
        )
      }
    </a>
  </div>
</MainGridLayout>
